<template>
  <view class="exercises-counter">
    <!-- 倒计时 -->
    <view class="validation-to-start" v-if="countFlag">
      <text class="start-text">即将开始验证</text>
      <text class="count-text">{{ countdown }}</text>
    </view>
    <!-- 题目 -->
    <view class="exercises-counter-main">
      <view class="top-exercises-main">
        <view class="top-count-down-control">
          <view class="down-count">剩余时间:83:27</view>
          <u-icon
            name="more-dot-fill"
            color="#fff"
            size="20"
            @click="handleShowCation"
          ></u-icon>
        </view>
        <view class="exercises-content-counter">
          <view class="exercises-type">{{
            exercisesType == 1 ? "单选题" : "多选题"
          }}</view>
          <view class="exercises-title">如何维护保养玻璃家具</view>
          <view
            class="exercises-options"
            v-for="item in exercisesOptions"
            :key="item.id"
            :class="{ active: selectExercisesId.includes(String(item.id)) }"
            @click="handleSelectExercises(item)"
          >
            <text>{{ item.type }}</text>
            <text>{{ item.title }}</text>
          </view>
        </view>
      </view>
      <view class="bottom-next-question">
        <view class="next-question-btn">下一题</view>
      </view>
    </view>

    <!-- 仅能验证注意事项 -->
    <Verification :show.sync="showVerificationModal" :coordinate="coordinateXY">
      <view class="verification-modal-main">
        <view class="verification-title">技能验证注意事项</view>
        <view class="verification-explain">
          1、验证需在规定时间内完成，超过时限视为放弃验证，需要重新验证；
        </view>
        <view class="verification-explain">
          2、验证期间可以选择“暂停”，暂停后可记录您的验证进度；
        </view>
        <view class="control-btn-counter">
          <view class="btn surrender" @click="handleSurrenderControl"
            >放弃本次验证</view
          >
          <view class="btn" @click="handlePauseControl">暂停验证</view>
        </view>
      </view>
    </Verification>
  </view>
</template>

<script>
import Verification from "../../../component/popupCom/Verification.vue";
export default {
  components: {
    Verification,
  },
  data() {
    return {
      countdown: 3,
      countTimer: null,
      countFlag: true,
      exercisesType: 2, // 1:单选，2:多选
      exercisesOptions: [
        {
          id: 1,
          type: "A",
          title: "玻璃类商品上一律不克重呀，或者防过热物品，以防爆裂。",
        },
        {
          id: 2,
          type: "B",
          title: "用干布擦拭使之光亮。",
        },
        {
          id: 3,
          type: "C",
          title:
            "所有视频在摆设时，如需放置在玻璃或木质表面上，一律应在饰品下方放置防滑垫片保护家具表面。",
        },
      ],
      selectMap: new Map(),
      selectExercisesId: [],
      showVerificationModal: false,
      coordinateXY: {},
    };
  },
  onBackPress(options) {
    // 点击虚拟键或者侧滑的时候触发（不允许返回）
    if (options.from === "backbutton") {
      return true;
    }
    // 否则则允许返回
    return false;
  },
  mounted() {
    this.countTimer = setInterval(() => {
      if (this.countdown == 1) {
        clearInterval(this.countTimer);
        this.countFlag = false;
        return;
      }
      this.countdown--;
    }, 1000);
  },
  destroyed() {
    clearInterval(this.countTimer);
  },
  methods: {
    // 选择题目答案
    handleSelectExercises(item) {
      if (this.exercisesType == 2) {
        // 多选
        if (this.selectMap.has(String(item.id))) {
          this.selectMap.delete(String(item.id));
        } else {
          this.selectMap.set(String(item.id));
        }
        this.selectExercisesId = Array.from(this.selectMap.keys());
      } else {
        // 单选
        this.selectMap.clear();
        this.selectMap.set(String(item.id));
        this.selectExercisesId = Array.from(this.selectMap.keys());
      }
    },

    // 打开注意事项
    handleShowCation() {
      this.coordinateXY = {
        /* #ifndef APP */
        X: "24rpx",
        Y: "90rpx",
        /* #endif */
        /* #ifdef APP */
        X: "24rpx",
        Y: "140rpx",
        /* #endif */
      };
      this.showVerificationModal = true;
    },

    // 放弃本次验证
    handleSurrenderControl() {
      this.showVerificationModal = false;
      uni.showToast({
        title: "加载中",
        icon: "loading",
      });
      setTimeout(() => {
        uni.hideToast()
        uni.redirectTo({
          url: "/pages/home/index",
        });
      }, 2000);
    },
    // 暂停验证
    handlePauseControl() {},
  },
};
</script>

<style lang="scss" scoped>
.exercises-counter {
  .validation-to-start {
    width: 100%;
    height: 100vh;
    background: #4da9ea;
    display: flex;
    flex-direction: column;
    gap: 28rpx;
    align-items: center;
    justify-content: center;
    .start-text {
      font-size: 38rpx;
      color: #fff;
    }
    .count-text {
      font-size: 84rpx;
      color: #fff;
      font-weight: 600;
    }
  }
  .exercises-counter-main {
    display: flex;
    flex-direction: column;
    gap: 10rpx;
    background: #f6f6f6;
    .bottom-next-question {
      height: 104rpx;
      width: 100%;
      background: #fff;
      padding: 14rpx 28rpx;
      box-sizing: border-box;
      .next-question-btn {
        padding: 20rpx 0;
        text-align: center;
        background: #4da9ea;
        opacity: 0.4;
        color: #fff;
        font-size: 26rpx;
        border-radius: 12rpx;
      }
    }
    .top-exercises-main {
      height: calc(100vh - 114rpx);
      background: #4da9ea;
      padding: 24rpx;
      box-sizing: border-box;
      .top-count-down-control {
        /* #ifdef APP */
        margin-top: var(--status-bar-height);
        /* #endif */
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 30%;
        .down-count {
          padding: 8rpx 20rpx;
          color: #fff;
          background: rgb(0, 0, 0, 0.4);
          border-radius: 8rpx;
          font-size: 24rpx;
        }
      }
      .exercises-content-counter {
        margin-top: 40rpx;
        padding: 24rpx;
        background: #fff;
        border-radius: 12rpx;
        .exercises-type {
          width: 88rpx;
          background: #e6f6fe;
          border-radius: 8rpx;
          color: #4da9ea;
          font-size: 20rpx;
          text-align: center;
          padding: 4rpx 0;
        }
        .exercises-title {
          margin-top: 30rpx;
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
        }
        .exercises-options {
          margin-top: 30rpx;
          padding: 40rpx 72rpx 40rpx 28rpx;
          background: #f6f6f6;
          border-radius: 12rpx;
          display: flex;
          align-items: center;
          gap: 20rpx;
          font-size: 28rpx;
          color: #666;
          border: 2rpx solid transparent;
          &.active {
            border-color: #4da9ea;
            background: #ebf8fe;
            color: #51aee5;
            font-weight: 500;
          }
        }
      }
    }
  }
  .verification-modal-main {
    .verification-title {
      font-size: 30rpx;
      font-weight: 500;
      color: #333;
      text-align: center;
    }
    .verification-explain {
      width: 460rpx;
      font-size: 28rpx;
      color: #333;
      margin-top: 36rpx;
    }
    .control-btn-counter {
      margin-top: 36rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .btn {
        padding: 30rpx;
        border-radius: 8rpx;
        font-size: 28rpx;
        background: #51aee5;
        color: #fff;
      }
      .surrender {
        background: #fff;
        border: 2rpx solid #51aee5;
        color: #51aee5;
      }
    }
  }
}
</style>
